<template>
	<view class="Lifa-container">
		<view class="title-service">
			<text>{{serviceName}}</text>
			<text>{{dec}}</text>
		</view>
		<view class="service-cost">
			<text>￥38/次</text>
			<text>三次免费服务 剩余3次</text>
		</view>
		<view class="service-container">
			<text>服务介绍</text>
			<text>{{duck}}</text>
			<navigator url="/pages/about/about"><button type="warn" class="btn-lifa">下单</button></navigator>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
              serviceName:"",
			  dec:"",
			  duck:""
			}
		},
		onLoad:function(option){
			this.serviceName=option.text1
			this.dec=option.text2
			this.duck=option.introduce
			console.log(option.text1)
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.Lifa-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		height: 100%;
	}

	.title-service {
		display: flex;
		flex-direction: column;
		/* 	align-items: stretch; */
		justify-content: space-around;
		width: 100%;
		height: 160px;
		background-image: url(../../../static/img/u519.svg);
		background-repeat: no-repeat;
	}

	.title-service>text {
		font-size: 20px;
		color: #F0F0F0;
		margin-left: 10px;
	}

	.service-cost {
		width: 100%;
		height: 50px;
		box-shadow: 0 0 10px #555153;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 20px;
	}
	.service-container{
		display: flex;
		flex-direction: column;
		align-items: stretch; 
		justify-content: space-around;
		box-shadow: 0 0 10px #555153;
		// height: 100%;
		& text{
			margin-left: 10px;
			margin-bottom: 20px;
			margin-top: 10px;
		}
	}
	.btn-lifa{
		margin-top: 180px;
		margin-bottom: 22px;
		width: 90%;
		
	}
</style>
